<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{sum}}</p>
			<p>{{my}}</p>
			<!-- |管道符 -->
			<p>{{aText | toUpper}}</p>
			
			<div :id="dataId | fromId">张张三</div>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					a: 10,
					b: 8,
					aText: 'hello',
					dataId:'dataId'
				},
				methods: {

				},
				computed: {
					sum() {
						return this.a + this.b
					},
					my(){
						return this.aText.toUpperCase()
					}
				},
				// 过滤器是用来首字母大写、日期格式等 对数据进行格式化操作
				filters: {
					toUpper(value) {
						// toUpperCase() 小写转换成大写
						return value.toUpperCase()
					},
					fromId(value){
						//charAt(2)获取索引为2的字符 indexOf('I')获取字符I字符中的索引
						return value.charAt(2)+value.indexOf('I')
					}
				}
			})
		</script>
	</body>
</html>